import { Arrow } from '../Arrow';
import { Basis } from './constants';
import { getBasisArrowParams, getBasisValueMap } from './utils/basis';
import { compact } from 'lodash-es';

export function BasisArrow(props: {
  width: number;
  height: number;
  basis: { x: Basis; y: Basis };
  show: { x: boolean; y: boolean };
}) {
  const { width, height, basis, show } = props;
  const basisValueMap = getBasisValueMap({ width: height, height: width });
  return (
    <>
      {compact([show.x && basis.x, show.y && basis.y]).map((basis) => {
        return (
          <Arrow
            key={basis}
            {...getBasisArrowParams({ basis, basisValueMap })}
          />
        );
      })}
    </>
  );
}
